<template>
  <ChartComp :id="id?id:'resultsBy'"
    :message="resultsByMessage" />
</template>

<script>
import { getAchievement } from '@/api/chart.js'
import ChartComp from '@/components/echart/charts.vue'
// let legendData = [
//   'xxx成果',
//   'xxx成果2',
//   'xxx成果3',
//   'xxx成果4',
//   'xxx成果5',
//   'xxx成果6'
// ]
// let seriesData = [
//   { value: 35, scale: 12, name: 'xxx成果' },
//   { value: 15, scale: 12, name: 'xxx成果2' },
//   { value: 113, scale: 12, name: 'xxx成果3' },
//   { value: 101, scale: 12, name: 'xxx成果4' },
//   { value: 89, scale: 12, name: 'xxx成果5' },
//   { value: 82, scale: 12, name: 'xxx成果6' }
// ]
export default {
  components: {
    ChartComp
  },
  props: {
    id: {
      require: true,
      type: String,
      default: ''
    },
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    id: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      resultsByMessage: {}
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getAchievement({ year: this.year }).then(res => {
        let legendData = res.data.legendData
        let seriesData = res.data.seriesData

        this.resultsByMessage = {
          colors: [
            '#FF6347',
            '#F4A460',
            '#FF8C00',
            '#48D1CC',
            '#FFE4B5',
            '#FFD700',
            '#8A2BE2',
            '#00BFFF',
            '#EE82EE',
            '#FFC0CB',
            '#FFFF00',
            '#7CFC00',
            '#32CD32',
            '#00FF7F',
            '#48D1CC',
            '#00FFFF'
          ],
          tooltip: {
            trigger: 'item'
          },
          // 设置环形中间的数据
          // graphic: {
          //   elements: [
          //     {
          //       type: 'text',
          //       left: 'center',
          //       top: '30%',
          //       z: 2,
          //       zlevel: 100,
          //       style: {
          //         text: '29887',
          //         font: '32px Microsoft YaHei',
          //         fill: '#fff'
          //       }
          //     },
          //     {
          //       type: 'text',
          //       left: 'center',
          //       top: '40%',
          //       z: 2,
          //       zlevel: 100,
          //       style: {
          //         text: '项目（个）',
          //         fill: '#D1D5DD',
          //         font: '14px Microsoft YaHei'
          //       }
          //     }
          //   ]
          // },
          legend: [
            {
              // top: 'bottom',
              type: 'scroll',
              orient: 'vertical',
              right: 10,
              top: 30,
              bottom: 20,
              itemWidth: 8, // 每个图例标记的宽度
              itemHeight: 8, // 每个图例标记的高度
              symbol: 'circle', // 图例标记的类型，这里设置为圆形
              textStyle: {
                //图例文字的样式
                color: '#ccc',
                fontSize: 14
              },
              formatter: function (name) {
                let v
                let s
                for (let i = 0, n = seriesData.length; i < n; i++) {
                  if (name == seriesData[i].name) {
                    v = seriesData[i].value
                    s = seriesData[i].scale
                  }
                }
                return `${name}(${v}) ${s}%`
              },
              data: legendData // 切割 legend.data 进行分列展示  第一列
            }
          ],
          series: [
            {
              name: 'Access From',
              type: 'pie',
              // radius: ['35%', '55%'],
              center: ['30%', '45%'],
              avoidLabelOverlap: false,
              itemStyle: {
                // borderRadius: 6,
                borderColor: 'transparent',
                borderWidth: 2
              },
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 16,
                  fontWeight: 'bold',
                  color: '#fff'
                },
                formatter: '{fs20|{b}}\n{c} ({d}%)'
              },
              labelLine: {
                show: false
              },
              data: seriesData
            }
          ]
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.a {
  color: rgba(255, 217, 61, 0.5);
}
</style>